Cuando se usa "await" en "dispatch(saveItem(item))" no se supone que tenga ningún efecto,
mientras tanto, si no uso "esperar", ambas funciones se ejecutarán al mismo tiempo, lo que dará como resultado un elemento guardado pero no una representación de componente.

Aunque el estado cambia en la tienda redux, la vista no lo hace, mientras usa await en realidad espera a que se complete el envío y luego ejecuta la navegación.

Mi pregunta principal es ¿cómo navegar correctamente después de un envío redux?

 import { useEffect, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; import { useForm } from '../hooks/useForm'; import { getById } from '../services/itemService'; import { saveItem } from '../store/actions/itemActions'; export function ItemEdit() { const dispatch = useDispatch(); const navigate = useNavigate(); const [item, handleChange, setItem] = useForm(null); const itemId = useParams().id; useEffect(async () => { await loadItem(); }, []); const loadItem = async () => { try { const item = await getById(itemId) setItem(item); } catch(err) { setErrMsg(err.name + ': ' + err.message); } }; const onSaveItem = async (ev) => { ev.preventDefault(); await dispatch(saveItem(item)); navigate('/item') } return ( <form onSubmit={onSaveItem}> <button>Save</button> </form> ); }